<template>
  <div class="one1_right">
    <div class="cut_btn">
      <el-button type="primary" size="small" @click="cutPage">表单统计</el-button>
      <div class="statics-work-tips">
        <span>考勤时间：{{ workTime.attendanceStandard }}</span>
      </div>
    </div>
    <div class="change_btn">
      <div class="up el-icon-arrow-left" @click="monthChange('up')"></div>
      <div class="none" @click="monthChange('now')">YYYY年MM月</div>
      <div class="down el-icon-arrow-right" @click="monthChange('down')"></div>
    </div>
    <el-calendar id="calendar" v-model="calendarTime" :first-day-of-week="7" class="el_calendar1">
      <template slot="dateCell" slot-scope="{ data }">
        <div class="full_height">
          <div class="calendar_day">
            {{ data.day.split('-').slice(2).join('-') }}
          </div>
          <div class="calendar_content">
            <div class="calendar_c_body">
              <div
                class="full_height"
                v-if="handleSelected(data.day).statusList && handleSelected(data.day).statusList.length > 0">
                <div v-for="(item, index) in handleSelected(data.day).statusList" :key="index">
                  <p
                    title="已登记考勤记录，点击可查看详情"
                    class="calendar-blue"
                    @click="lookOne(item)"
                    v-if="item.dailyId">
                    {{ item.attendanceStatus }}
                    <i class="edit_r el-icon-circle-check"></i>
                  </p>
                </div>
              </div>
            </div>
            <div v-if="data.type == 'current-month'" class="calendar_time">
              <div v-if="handleSelected(data.day) && handleSelected(data.day).isWork == '0'">
                休息
                <span v-if="handleSelected(data.day).inPunch || handleSelected(data.day).outPunch">
                  ({{ handleSelected(data.day).inPunch }} - {{ handleSelected(data.day).outPunch }})
                </span>
              </div>
              <div v-if="handleSelected(data.day) && handleSelected(data.day).isWork == '1'">
                {{ handleSelected(data.day).inPunch }}
                <span v-if="handleSelected(data.day).inPunch || handleSelected(data.day).outPunch">-</span>
                {{ handleSelected(data.day).outPunch }}
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-calendar>

    <!-- 新建 start -->
    <XnDialog
      title="考勤登记单"
      :visible.sync="inforDiaShow"
      width="70%"
      class="branch_dialog"
      @close="inforDiaShow = false">
      <AttendanceAdd
        v-if="inforDiaShow"
        :tabsOne="tabsOne"
        staticsShow="2"
        @addSuccess="addSuccess"
        @cancelData="cancelData" />
    </XnDialog>
    <!-- 查看上报材料 end -->

    <!-- 查看 start -->
    <XnDialog
      title="考勤登记单"
      :visible.sync="lookDiaShow"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="70%"
      class="branch_dialog"
      @close="lookDiaShow = false">
      <AttendOneRight
        v-if="lookDiaShow"
        :keysItem="oneItem"
        :id="idOne"
        :formId="formId"
        staticsShow="2"
        @addSuccess="addSuccess"
        @cancelData="cancelData" />
    </XnDialog>
    <!-- 查看上报材料 end -->
  </div>
</template>

<script>
import { getUserStatisticsCalendar, listAttendanceFormType } from '@apis/api-attendance.js'
import AttendOneRight from './components/AttendOneRight'
import AttendanceAdd from './components/AttendanceAdd'
import XnDialog from '@com/xnDialog.vue'
import moment from 'moment'
export default {
  components: {
    AttendOneRight,
    AttendanceAdd,
    XnDialog,
  },
  props: {
    showAll: {
      type: String,
      default: '',
    },
    uesrId: {
      type: String,
      default: '',
    },
    startDate: {
      type: String,
      default: '',
    },
    endDate: {
      type: String,
      default: '',
    },
    workTime: {
      type: Object,
      default: () => {
        return { attendanceRole: '', attendanceStandard: '' }
      },
    },
  },
  data() {
    return {
      attendanceDetailsData: [],
      inforDiaShow: false,
      lookDiaShow: false,
      idOne: '',
      formId: '',
      calendarTime: new Date(),
      userInfo: JSON.parse(localStorage.PSKH_USERINFO),
      tabList: [
        { formName: '请假单', id: '1' },
        // { formName: '公务外出单', id: '2' },
        // { formName: '错时上班', id: '4' },
        // { formName: '补卡单', id: '5' },
        // { formName: '调休单', id: '6' },
        // { formName: '出行报备', id: '7' },
      ],
      tabsOne: {},
      oneItem: {},
    }
  },
  created() {
    this.calendarTime = new Date()
    this.calendarStatistics()
    this.listAttendanceFormType()
  },
  mounted() {},
  methods: {
    calendarStatistics() {
      const uesrId = this.uesrId || this.userInfo.userId
      getUserStatisticsCalendar({
        startTime: this.startDate,
        endTime: this.endDate,
        userId: uesrId,
        isLeaveCancel: '',
        leaveId: '',
        loginUserId: uesrId,
        orgId: this.userInfo.loginPostInfo.orgId,
        type: '0',
      }).then(res => {
        this.attendanceDetailsData = res.data
      })
    },

    listAttendanceFormType() {
      listAttendanceFormType({}).then(res => {
        this.tabList = [...res.data]
      })
    },
    addSuccess() {
      this.inforDiaShow = false
      this.calendarStatistics()
    },
    cancelData() {
      this.inforDiaShow = false
    },
    lookOne(item) {
      this.idOne = item.dailyId
      this.formId = item.formId
      this.oneItem = item
      this.lookDiaShow = true
    },
    handleSelected(day) {
      let flag = {} // 默认显示为0
      this.attendanceDetailsData.forEach(item => {
        // this.attendanceDetailsData是后台返回的数据
        if (item.calendarOfDay === day) {
          // 判断显示数据
          flag = item
        }
      })
      return flag
    },
    newInfor(tabs) {
      this.inforDiaShow = true
      this.tabsOne = tabs
    },
    monthChange(type) {
      let month = ''
      let monthStart = ''
      let monthEnd = ''
      if (type === 'up') {
        month = moment(this.calendarTime).subtract(1, 'month').format('YYYY-MM')
      } else if (type === 'down') {
        month = moment(this.calendarTime).add(1, 'month').format('YYYY-MM')
      } else {
        // month = new Date()
        return
      }
      monthStart = moment(month).startOf('month').format('YYYY-MM-DD')
      monthEnd = moment(month).endOf('month').format('YYYY-MM-DD')
      this.calendarTime = new Date(month)
      const uesrId = this.uesrId || this.userInfo.userId
      getUserStatisticsCalendar({
        startTime: monthStart,
        endTime: monthEnd,
        userId: uesrId,
        isLeaveCancel: '',
        leaveId: '',
        loginUserId: uesrId,
        orgId: this.userInfo.loginPostInfo.orgId,
        type: '0',
      }).then(res => {
        this.attendanceDetailsData = res.data
      })
    },
    cutPage() {
      this.$emit('cutPage', '1')
    },
  },
}
</script>

<style lang="scss" scoped>
.el-dropdown {
  vertical-align: top;
}
/deep/.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
/deep/.el-dropdown-menu__item {
  line-height: 40px;
  padding: 0 25px;
}
.one1_right {
  height: 100%;
  position: relative;
  .el_calendar1 {
    height: 100%;
    /deep/ .el-calendar__body {
      height: calc(100% - 50px);
      overflow-y: auto;
      position: relative;
    }
    /deep/.el-calendar-table .el-calendar-day {
      height: 95px;
      min-height: 60px;
      overflow-y: auto;
      position: relative;
      &::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        border-radius: 0px;
      }
    }
    /deep/ .el-calendar__header {
      justify-content: center;
      font-size: 20px;
    }
    /deep/ .el-calendar__button-group {
      display: none;
    }
    /deep/ .el-calendar-table {
      // width: 100%;
      // height: 100%;
      &:not(.is-range) {
        td.next {
          pointer-events: none;
        }
        td.prev {
          pointer-events: none;
        }
      }
    }
  }
  .calendar_day {
    height: 25%;
  }
  .calendar_content {
    height: 75%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .calendar_c_body {
      flex: 1 0 auto;
    }
    .back-red-font {
      background-color: #ff0000;
      color: #fff;
      text-align: center;
      padding: 2px 0;
    }
    .back-yellow-font {
      background-color: #cccc13;
      color: #fff;
      text-align: center;
      padding: 2px 0;
    }
    .back-blue-font {
      background-color: #8faece;
      color: #fff;
      text-align: center;
      padding: 2px 0;
      margin-bottom: 4px;
    }
    .calendar-yellow {
      background-color: #cccc13;
      color: #fff;
      padding: 2px 10px;
      margin-bottom: 4px;
      text-align: center;
    }
    .calendar-red {
      background-color: #ff0000;
      color: #fff;
      padding: 2px 10px;
      margin-bottom: 4px;
      text-align: center;
    }
    .calendar-blue {
      background-color: #8faece;
      color: #fff;
      padding: 2px 10px;
      margin-bottom: 4px;
      text-align: center;
    }
    .edit_r {
      float: right;
      margin-top: 2px;
    }
  }
  .calendar_time {
    flex: 0 0 auto;
    // margin-top: 8px;
    color: #c0c4cc;
  }
  .change_btn {
    position: absolute;
    font-size: 22px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #333333;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    div {
      margin: 0 10px;
    }
    .none {
      opacity: 0;
    }
  }
  .cut_btn {
    position: absolute;
    right: 20px;
    top: 6px;
    display: flex;
    align-items: center;
    font-size: 16px;
    .el-button {
      margin-right: 20px;
    }
    .statics-work-tips {
      color: #999999;
    }
  }
}
</style>
